<template>
	<view>
		<view class="box">
			<view class="yh" v-for="i in 5">
				<u-row>
					<u-col span="4" class="yhmoneybox">
						<view class="yhmoney">￥10</view>
						<view class="yhtj">满20元可用</view>
					</u-col>
					<u-col span="8" class="yhinfo">
						<view class="yhmember">
							<view class="yhtype">通用劵</view>
							<view class="yhname">测试用户</view>
						</view>
						<u-line></u-line>
						<view class="yhbtns">
							<view class="yhdate">不限时</view>
							<view class="yhbtn">立即领取</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #f5f5f5;
		padding: 30rpx 30rpx;
	}

	.yh {
		width: 100%; 
		margin-bottom: 30rpx;
		background-color: #fff;
	}

	.yhmoneybox {
		background-color: #ff0000;
		height: 180rpx;
	}

	.yhmoney {
		color: #fff; 
		text-align: center;
		font-weight: 800;
		font-size: 50rpx;
		padding-top: 30rpx;
	}

	.yhtj {
		color: #fff; 
		text-align: center;
		font-weight: 700;
		font-size: 28rpx;
	}
	.yhinfo{
		height: 180rpx;
		background-color: #fff; 
	}

	.yhmember {
		padding: 25rpx 20rpx;  
	}

	.yhtype {
		padding: 0 5px;
		text-align: center;
		box-sizing: border-box;
		background: #fff7f7;
		border: 1px solid #e83323;
		opacity: 1;
		border-radius: 20rpx;
		font-size: 10rpx;
		line-height: 36rpx;
		color: #e83323;
		margin-right: 6px;
		float: left;
	}

	.yhtypename {
		float: left;
		color: #666;
		font-size: 28rpx;
	}

	.yhbtns {
		padding-top: 40rpx;
		padding-left: 20rpx;
	}

	.yhdate {
		color: #999;
		float: left;
		font-size: 26rpx;
	}

	.yhbtn {
		float: right;
		width: 68px;
		height: 22px;
		border-radius: 11px;
		font-size: 11px;
		text-align: center;
		line-height: 22px;
		color: #fff;
		background-color: #ff0000;
		margin-right: 20rpx;
	}
</style>
